<template>
  <view class="main">
    <mynav ref="nav" :title="params.customerNameQx + '风险概况'" @emit_showXZ="$refs.search.showXZ = true" />

    <view class="u-p-20">
      <!-- 搜索框 -->
      <view class="search u-flex u-m-b-20">
        <view class="mk">
          <u-search
            bg-color="#fff"
            placeholder="请输入工作面名称"
            v-model="searchData.areaName"
            :animation="true"
            @custom="handleSearch"
            @search="handleSearch"
          ></u-search>
        </view>
        <view class="mk">
          <u-checkbox-group>
            <u-checkbox v-model="searchData.onlyShowPoint" @change="ckchange">只显示高风险数据</u-checkbox>
          </u-checkbox-group>
        </view>
      </view>
    </view>

    <scroll-view
      class="content"
      :scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      @scrolltolower="onScrollToLower"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
    >
      <template>
        <u-collapse :accordion="false" ref="collapseView">
          <u-collapse-item class="u-m-b-20 u-p-l-20 bg-white" v-for="obj in mylist">
            <template slot="title">
              <view class="u-flex u-row-between mytab font-w">
                <view>
                  <view class="u-p-5">{{ obj.groupName.substr(0, 10) }}</view>
                  <view> {{ obj.groupName.substr(10) }} </view>
                </view>
                <view>
                  <view>综合风险指数：{{ obj.maxPoint }}</view>
                </view>
              </view>
            </template>
            <view v-for="it in obj.children" class="u-p-10" @click="info(it)">
              <u-line></u-line>
              <view class="u-flex u-row-between font-w u-p-t-10 u-p-b-10">
                <view class="my-title">{{ it.areaName }}</view>
                <view>综合风险指数：{{ it.areaPoint }}</view>
              </view>
              <u-line></u-line>
              <view class="u-p-10">
                <view><text class="font-w">异常波动持续时长（分钟）：</text>{{ it.waveDuration }}</view>
                <view><text class="font-w">异常波动风险指数：</text>{{ it.waveRiskPoint }}</view>
                <view><text class="font-w">绝对瓦斯涌出量：</text>{{ it.emiValue }}</view>
                <view><text class="font-w">绝对瓦斯涌出风险指数：</text>{{ it.emiPoint }}</view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>

    <search ref="search" @submitDate="submitDate" />
  </view>
</template>

<script>
import search from "./search.vue";
import mynav from "./nav.vue";

export default {
  components: { search, mynav },
  data() {
    return {
      status: "loading",
      triggered: false, // 下拉刷新
      showEmpty: false,
      searchData: {
        areaName: "",
        countyNo: "",
        onlyShowPoint: true,
        customerNo: "",
        beginDate: "",
        endDate: "",
        pageSize: 20,
        pageNumber: 1,
      },
      params: {},
      mylist: [],
    };
  },
  onLoad(obj) {
    this.params = JSON.parse(obj.item);
    this.searchData = { ...this.searchData, ...this.params };
  },
  onReady() {
    const { beginDate, endDate } = this.searchData;
    let searchDom = this.$refs.search.searchData;
    searchDom.beginDate = beginDate;
    searchDom.endDate = endDate;
    //
    this.getData();
  },
  methods: {
    info(obj) {
      const { id, customerName, waveDuration, waveRiskPoint } = obj;
      const params = {
        id,
        customerName,
        waveDuration,
        waveRiskPoint,
      };
      uni.navigateTo({
        url: `./gasDetail?item=${JSON.stringify(obj)}`,
      });
    },
    ckchange() {
      const that = this;
      this.$nextTick(() => {
        that.handleSearch();
      });
    },
    handleSearch() {
      this.mylist = [];
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
      this.getData();
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status == "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },

    submitDate(obj) {
      this.searchData.beginDate = obj.beginDate;
      this.searchData.endDate = obj.endDate;
      this.handleSearch();
    },
    async getData() {
      const { pageSize, pageNumber, beginDate, endDate, customerNo, onlyShowPoint, areaName } = this.searchData;
      const query = {
        beginDate,
        customerNo,
        endDate,
        onlyShowPoint: Number(onlyShowPoint),
        areaName,
        pageSize,
        pageNumber,
      };
      const { body } = await this.$post("/gas/gush/risk/info/dataList", query);
      if (Array.isArray(body.content)) {
        const myarr = body.content;
        this.mylist = this.searchData.pageNumber === 1 ? myarr : this.mylist.concat(myarr);
        //
        const that = this;
        that.$nextTick(() => {
          uni.showLoading();
          setTimeout(() => {
            that.$refs.collapseView.init();
            uni.hideLoading();
          }, 500);
        });
        // 到底了
        if (myarr.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.mylist && this.mylist.length === 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
      } else {
        this.showEmpty = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background: #f7f7fa;
}
.search {
  .xq {
    width: 8em;
  }

  .mk {
    flex: 1;
    margin-left: 1em;

    .u-input--border {
      border-radius: 22.5px;
    }
  }
}

.font-w {
  font-weight: bold;
}

.content {
  flex: 1;
  overflow: hidden;
  padding: 0 20rpx 20rpx 20rpx;
  box-sizing: border-box;
}

.mytab {
  flex: 1;
}

.bg-white {
  background: white;
}

.my-title {
  text-decoration: underline;
  color: #409eff;
}
</style>
